<template>
  
        <div class="customTab table_box">
            <el-form :inline="true" :model="forms" class="search-form-new">
                <el-form-item label="虞豆类型">
                    <el-select v-model="forms.msgType" placeholder="请选择" clearable>
                        <el-option v-for="(item, key) in commonMaps.jifenTypeMap" :key="key" :label="item.label"
                            :value="key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="时间" prop="timer">
                    <el-date-picker clearable size="small" v-model="timer" type="daterange" value-format="yyyy-MM-dd"
                        align="right" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        @change="searchList">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="searchList()">查询</el-button>
                    <el-button type="info" size="small" plain @click="chongzhi">重置</el-button>
                </el-form-item>
            </el-form>
            <div >
                <div class="table_box">
            <el-table  :data="list" style="width: 100%">
                <el-table-column prop="id" label="编号" width="100" align="center">
                </el-table-column>
                <el-table-column prop="msg" label="详情" align="center">
                </el-table-column>
                <!--  -->
                <!-- <el-table-column prop="saleName" label="推送" >
          </el-table-column> -->
                <el-table-column prop="createName" label="操作人" align="center">
                    <template slot-scope="scope">
                        <div>
                            {{ scope.row.createName || '系统' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="campNumber" label="虞豆变动" align="center">
                    <template slot-scope="scope">
                        <div :style="{ color: scope.row.campNumber > 0 ? 'green' : 'red' }">
                            {{ scope.row.campNumber > 0 ? '+' + scope.row.campNumber : scope.row.campNumber }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="lastNumber" label="变动后虞豆" align="center">
                </el-table-column>
                <!-- lastNumber -->
                <el-table-column prop="createTime" label="创建时间" align="center">
                </el-table-column>
            </el-table>
            <div style="text-align: right; margin-top: 20px">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="this.forms.pageNum" :page-sizes="[10, 20, 30, 50]" :page-size="this.forms.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
        </div>
        </div>
   
</template>
<script>
import { RecordQuery } from "@/api/shangcheng";

export default {

    data() {
        return {
            loading: false,
            forms: {
                pageSize: 10,
                pageNum: 1,
                createName: null,
                type: 3,
            },
            list: [],
            total: 0,
            timer: [],


        };
    },
    methods: {
        // Tab切换处理
        handleTabChange(tab) {
            this.activeTab = tab.name;

        },
        async getMessage() {
            if (this.timer && this.timer.length == 2) {
                this.forms.startTime = this.timer[0] + " 00:00:00";
                this.forms.endTime = this.timer[1] + " 23:59:59";
            } else {
                this.forms.startTime = "";
                this.forms.endTime = "";
            }
            this.loading = true;
            const res = await RecordQuery(this.forms);
            this.loading = false;
            this.list = res.rows;
            this.total = res.total;
        },
        //分页
        handleSizeChange(val) {
            this.forms.pageSize = val;
            this.getMessage();
        },
        handleCurrentChange(val) {
            this.forms.pageNum = val;
            this.getMessage();
        },
        searchList() {
            this.forms.pageNum = 1;
            this.getMessage();
        },
        chongzhi() {
            this.forms = {
                pageSize: 10,
                pageNum: 1,
                createName: null,
                type: 3,
            };
            this.timer = [];
            this.getMessage();
        },
    },
    created() {
        this.getMessage();
    },
};
</script>
<style lang="scss" scoped>
.table_box {
    border-radius: 0;
}
</style>